<template>
  <el-autocomplete
      popper-class="order-autocomplete"
      v-model.lazy="val"
      placeholder="中文"
      :fetch-suggestions="querySearchAsync"
      clearable
      @select="select"
      @blur="translate"
      @clear="clear">
    <template slot-scope="{item}">
      <div style="display: flex;justify-content: space-between;margin-bottom: 5px" v-show="item.id">
        <div class="name">{{item.value}}</div>
        <el-button type="danger" size="mini" @click.stop="hiddenOrder(item)">删除</el-button>
      </div>
    </template>
  </el-autocomplete>
</template>

<script>
  import {listByNameApi, hiddenOrderApi} from '@/api/order'

  export default {
    name: "InputSelectStart",
    props: {
      value: {
        type: String
      },
      that: {
        type: Object
      }
    },
    data() {
      return {
        val: ''
      }
    },
    watch: {
      value(val, old) {
        if (val && !old) { // 第一次输入执行
          this.val = val;
        }
        if (!val && this.val) { // 只有外边清空才执行
          this.val = '';
        }
      }
    },
    methods: {
      hiddenOrder(obj) {
        hiddenOrderApi({id: obj.id}).then(result => {
          if (result.status === 200) obj.id = 0
        })
      },
      clear() {
        let _this = this.that;
        _this.form.senderName = ''; // 寄件人姓名
        _this.form.laosSenderName = '';
        _this.form.enSenderName = '';
        _this.form.senderCompanyName = ''; // 寄件单位名称
        _this.form.laosSenderCompanyName = '';
        _this.form.senderAddress = ''; // 寄件人详细地址
        _this.form.laosSenderAddress = '';
        _this.form.enSenderAddress = '';
        _this.form.senderPhone = ''; // 寄件人联系电话
        _this.form.senderId = ''; // 寄件人证件号
        _this.form.senderCity = ''; // 发件人城市
        _this.form.enSenderCity = '';
      },
      set(obj) {
        let _this = this.that;
        _this.form.senderName = obj.senderName; // 寄件人姓名
        _this.form.laosSenderName = obj.laosSenderName;
        _this.form.enSenderName = obj.enSenderName;
        _this.form.senderCompanyName = obj.senderCompanyName; // 寄件单位名称
        _this.form.laosSenderCompanyName = obj.laosSenderCompanyName;
        _this.form.senderAddress = obj.senderAddress; // 寄件人详细地址
        _this.form.laosSenderAddress = obj.laosSenderAddress;
        _this.form.enSenderAddress = obj.enSenderAddress;
        _this.form.senderPhone = obj.senderPhone;  // 寄件人联系电话
        _this.form.senderId = obj.senderId; // 寄件人证件号
        _this.form.senderCity = obj.senderCity; // 发件人城市
        _this.form.enSenderCity = obj.enSenderCity;
      },
      translate() {
        let _this = this.that;
        _this.translateZhToEn(this.val, 'laosSenderName', 'enSenderName'); // 寄件人姓名
      },
      select(val) {
        this.val = val.senderName;
        this.$emit('input', val.senderName);
        this.$parent.$emit('el.form.change');
        this.set(val);
      },
      querySearchAsync(query, cb) {
        this.$emit('input', query);
        this.$parent.$emit('el.form.change');
        if (query) {
          let data = {
            senderName: query,
            receiverName: ''
          };
          listByNameApi(data).then(result => {
            result.resultParam.expressOrderList.forEach(item => {
              item.value = item.senderName + " --- " + item.senderPhone
            })
            let arr = result.resultParam.expressOrderList
            /* 去重 */
            // for (let i = 0; i < arr.length; i++) {
            //   for (let j = i + 1; j < arr.length; j++) {
            //     if (arr[i].senderName === arr[j].senderName && arr[i].senderPhone === arr[j].senderPhone) {
            //       arr.splice(j, 1);
            //       j--;
            //     }
            //   }
            // }
            /* 去重 */
            cb(arr)
          })
        } else {
          cb([])
        }
      }
    }
  }
</script>

<style lang="scss">
  .order-autocomplete {
    width: 275px !important;
  }
</style>
